<template>
  <div class="dashboard-container">
    <div class="dashboard-text">网站设置</div>
    <div>
      <el-button @click="webSite(1)">打开网站</el-button>
      <el-button @click="webSite(0)">关闭网站</el-button>
    </div>
    <div class="dashboard-text">是否允许交易</div>
    <div class="block" style="margin-bottom: 15px">
      <el-switch v-model="transState" active-text="打开" inactive-text="关闭" active-value="1" inactive-value="0"
        @change="setTransState" />
    </div>
    <div class="dashboard-text">设置汇率</div>
    <el-row>
      <el-col>
        <el-button @click="open">当前汇率：{{ rate }}</el-button>

      </el-col>
    </el-row>
    <el-button @click="openWXD" style="margin-top: 15px;display: block;margin-left: 0;">无限代统计</el-button>

    <div class="dashboard-text">总览统计</div>
    <div class="block" style="margin-bottom: 15px">
      <el-date-picker v-model="date4" type="daterange" range-separator="至" start-placeholder="开始日期"
        end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="getDate4" />
    </div>

    <el-row :gutter="12">
      <!-- <el-col :span="8">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>账户总余额	</span>
          </div>
          <p class="num">{{ statistics.totalBalance }}</p>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>总下注金额	</span>
          </div>
          <p class="num">{{ statistics.totalBet }}</p>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>总充值金额	</span>
          </div>
          <p class="num">{{ statistics.totalRecharge }}</p>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>总转账金额	</span>
          </div>
          <p class="num">{{ statistics.totalTransfer }}</p>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>总注册人数	</span>
          </div>
          <p class="num">{{ statistics.totalUser }}</p>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>总盈利金额	</span>
          </div>
          <p class="num">{{ statistics.totalWin }}</p>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>总提现金额	</span>
          </div>
          <p class="num">{{ statistics.totalWithdrawal }}</p>
        </el-card>
      </el-col> -->
      <el-col :span="8">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>总注册人数</span>
          </div>
          <p class="num">{{ statistics.totalUser }}</p>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>总充值金额 </span>
          </div>
          <p class="num">{{ statistics.totalRecharge }}</p>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>总提现金额 </span>
          </div>
          <p class="num">{{ statistics.totalWithdrawal }}</p>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>总转账金额 </span>
          </div>
          <p class="num">{{ statistics.totalTransfer }}</p>
        </el-card>
      </el-col>
      <!-- <el-col :span="8">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>总下注金额 </span>
          </div>
          <p class="num">{{ statistics.totalBet }}</p>
        </el-card>
      </el-col> -->
      <!-- <el-col :span="8">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>总盈利金额 </span>
          </div>
          <p class="num">{{ statistics.totalWin }}</p>
        </el-card>
      </el-col> -->
      <el-col :span="8">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>账户总TRX余额 </span>
          </div>
          <p class="num">{{ statistics.totalBalance }}</p>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>托管总金额 </span>
          </div>
          <p class="num">{{ statistics.totalAiAmount }}</p>
        </el-card>
      </el-col>
      <!-- <el-col :span="8">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>账户保险仓总和 </span>
          </div>
          <p class="num">{{ statistics.totalInsuranceBalance }}</p>
        </el-card>
      </el-col> -->
      <!-- <el-col :span="8">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>今日待释放保险仓总和 </span>
          </div>
          <p class="num">{{ statistics.todayFreezeInsuranceBalance }}</p>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>今日托管释放金额 </span>
          </div>
          <p class="num">{{ statistics.todayAiAmount }}</p>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>剩余wk总和 </span>
          </div>
          <p class="num">{{ statistics.totalWkAmount }}</p>
        </el-card>
      </el-col> -->
      <el-col :span="8">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>昨日发放业绩 </span>
          </div>
          <p class="num">{{ statistics.todayCommission }}</p>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>总业绩 </span>
          </div>
          <p class="num">{{ statistics.totalCommission }}</p>
        </el-card>
      </el-col>
    </el-row>
    <div class="dashboard-text">实时榜单</div>
    <div class="tablist">
      <el-table :data="amountTop" style="margin-right: 30px" border>
        <el-table-column label="实时用户余额榜20" align="center">
          <el-table-column prop="userId" label="用户ID" align="center" />
          <el-table-column prop="username" label="用户昵称" align="center" />
          <el-table-column prop="amount" label="金额" align="center" />
        </el-table-column>
      </el-table>
      <!-- <el-table :data="betTop" style="margin-right: 30px" border>
        <el-table-column label="实时用户输赢榜20" align="center">
          <el-table-column prop="userId" label="用户ID" align="center" />
          <el-table-column prop="username" label="用户昵称" align="center" />
          <el-table-column prop="amount" label="金额" align="center" />
        </el-table-column>
      </el-table> -->
      <el-table :data="performanceTop" style="margin-right: 30px" border>
        <el-table-column label="昨日团队业绩发放榜20" align="center">
          <el-table-column prop="userId" label="用户ID" align="center" />
          <el-table-column prop="username" label="用户昵称" align="center" />
          <el-table-column prop="amount" label="金额" align="center" />
        </el-table-column>
      </el-table>
      <el-table :data="aiTop" border>
        <el-table-column label="昨日ai托管收益榜20" align="center">
          <el-table-column prop="userId" label="用户ID" align="center" />
          <el-table-column prop="username" label="用户昵称" align="center" />
          <el-table-column prop="amount" label="金额" align="center" />
        </el-table-column>
      </el-table>
    </div>
    <!-- <div class="dashboard-text">充值提现统计</div>

    <div class="block">
      <el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期"
        end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="getDate" />
    </div>
    <div id="chart1" style="width: 100%; height: 400px; margin-top: 30px" />

    <div class="dashboard-text">下注统计</div>
    <div class="block">
      <el-date-picker v-model="date2" type="daterange" range-separator="至" start-placeholder="开始日期"
        end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="getDate2" />
    </div>  -->
    <!-- <div id="chart2" style="width: 100%; height: 400px; margin-top: 30px" /> -->
    <el-dialog title="设置汇率" :visible.sync="dialogVisible" width="600px">
      <el-input v-model="rate" type="number" placeholder="请输入wk余额" style="width: 350px;" />

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="无限代统计" :visible.sync="dialogVisible2" width="600px" append-to-body>
      <el-input v-model="userID" v-if="!statisticsUser.todo" placeholder="请输入用户ID" style="width: 350px;" />
      <el-descriptions title="" v-if="statisticsUser.todo" :column="4">
        <el-descriptions-item label="用户ID">{{ userID }}</el-descriptions-item>
        <el-descriptions-item label="总待收益">{{ statisticsUser.todo }}</el-descriptions-item>
        <el-descriptions-item label="总持仓中">{{ statisticsUser.progressing }}</el-descriptions-item>
        <el-descriptions-item label="总余额">{{ statisticsUser.balance }}</el-descriptions-item>

      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="confirm2">确 定</el-button>
      </span>
    </el-dialog>
    <!-- <div class="dashboard-text">总览统计</div>
    <div class="block">

      <el-date-picker
        v-model="date3"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        @change="getDate3"
      />
    </div>
    <div id="chart3" style="width: 100%; height: 400px;margin-top: 30px;" /> -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  statisticsPayChat,
  getTransactionState,
  setTransactionState,
  statisticsBetChat,
  statisticsView,
  aiTop20,
  amountTop20,
  betTop20,
  performanceTop20,
  getRate, setRate, allChildrenAmount,
  start,
  stop
} from '@/api/table'
import * as echarts from 'echarts'
import { getMonth } from '@/utils/index'
export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters(['name'])
  },
  data() {
    return {
      homeData: {},
      date: [],
      date2: [],
      date3: [],
      date4: [],
      statistics: {},
      expectData: {},
      aiTop: [],
      amountTop: [],
      betTop: [],
      performanceTop: [],
      transState: null,
      dialogVisible: false,
      rate: 0,
      dialogVisible2: false,
      userID: '',
      dialogVisible3: false,
      statisticsUser: {}
    }
  },

  mounted() {
    // this.getHome()
    this.getState()
    this.getChart()
    this.getRateData()
    // this.getEcpect()
  },
  methods: {
    async getRateData() {
      const res = await getRate()
      this.rate = res.data

    },
    openWXD() {
      this.userID = ''
      this.statisticsUser = {}
      this.dialogVisible2 = true
    },
    confirm2() {
      if (this.statisticsUser.todo) {
        this.dialogVisible2 = false
      }
      if (this.userID) {
        allChildrenAmount(this.userID).then(res => {
          this.dialogVisible3 = true
          this.statisticsUser = res.data
          console.log(this.statisticsUser)
        })

      }
    },
    webSite(state) {
      this.$confirm(`是否${state == 1 ? '打开' : '关闭'}网站`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (state == 1) {
          start().then(res => {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
          })
        } else {
          stop().then(res => {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
          })
        }
      })
    },
    async confirm() {
      this.$confirm('是否确认?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        setRate(this.rate).then(res => {
          this.dialogVisible = false
          this.getRateData()
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        })
      })
    },
    open() {
      this.dialogVisible = true
    },
    // getHome() {
    //   statisticsHome().then(res => {
    //     console.log(res)
    //     this.homeData = res.data
    //   })
    // },
    async getState() {
      const res = await getTransactionState()
      this.transState = res.data
      console.log(res)
    },
    async setTransState(e) {
      await setTransactionState(e)
      this.getState()
      console.log(e)
    },
    async getAiTop() {
      const res = await aiTop20()
      this.aiTop = res.data
    },
    async getAmountTop() {
      const res = await amountTop20()
      this.amountTop = res.data
    },
    async getBetTop20() {
      const res = await betTop20()
      this.betTop = res.data
    },
    async getPerformanceTop() {
      const res = await performanceTop20()
      this.performanceTop = res.data
    },
    getChart() {
      const start = getMonth('s', 0)
      const end = getMonth('e', 0)
      const date = new Date()
      const f = date.getFullYear()
      const m = date.getMonth() + 1
      const d = date.getDate()
      const str =
        f + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d)
      this.date = [start, end]
      this.date2 = [start, end]
      this.date3 = [start, end]
      this.date4 = [str, str]

      this.getRWcharts({ startTime: start, endTime: end })
      this.getTeamCharts({ startTime: start, endTime: end })
      // this.getInvestChart({ startTime: start, endTime: end })
      this.getByDate({ startTime: str, endTime: str })
      this.getAiTop()
      this.getAmountTop()
      this.getBetTop20()
      this.getPerformanceTop()
    },
    getInvestChart(e) {
      statisticsView(e).then((res) => {
        const data = res.data
        const xData = []
        const amountList = []
        data.map((item) => {
          xData.push(item.now)
          amountList.push(item.amount)
        })
        this.initChart3(xData, amountList)
      })
    },
    getTeamCharts(e) {
      statisticsBetChat(e).then((res) => {
        const data = res.data
        const xData = []
        const amountList = []
        const winList = []
        data.map((item) => {
          xData.push(item.now)
          amountList.push(item.betAmount)
          winList.push(item.winAmount)
        })
        this.initChart2(xData, amountList, winList)
      })
    },
    // getEcpect() {
    //   expectedStatistics().then((res) => {
    //     console.log(res)
    //     this.expectData = res.data
    //   })
    // },
    getByDate(e) {
      statisticsView(e).then((res) => {
        this.statistics = res.data
      })
    },
    getRWcharts(e) {
      statisticsPayChat(e).then((res) => {
        const data = res.data
        const xData = []
        const rechargeData = []
        const withdrawalData = []
        data.map((item) => {
          xData.push(item.now)
          rechargeData.push(item.todayRecharge)
          withdrawalData.push(item.todayWithdrawal)
        })
        this.initChart1(xData, rechargeData, withdrawalData)
      })
    },
    // 充值提现
    initChart1(xData, rechargeData, withdrawalData) {
      const chart = echarts.init(document.getElementById('chart1'))
      const option = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['充值', '提现']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: xData
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '充值',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: rechargeData
          },
          {
            name: '提现',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: withdrawalData
          }
        ]
      }
      chart.setOption(option)
      // ...
    },
    // 下注
    initChart2(xData, amountList, winList) {
      console.log(xData, amountList)
      const chart = echarts.init(document.getElementById('chart2'))
      const option = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['下注', '收益']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: xData
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '下注',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: amountList
          },
          {
            name: '收益',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: winList
          }
        ]
      }
      chart.setOption(option)
      // ...
    },
    // 总览统计
    initChart3(xData, amountList) {
      const chart = echarts.init(document.getElementById('chart3'))
      const option = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['充值', '提现']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: xData
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '持仓收益',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: amountList
          }
        ]
      }
      chart.setOption(option)
      // ...
    },
    getDate(r) {
      this.getRWcharts({ startTime: r[0], endTime: r[1] })
    },
    getDate2(r) {
      this.getTeamCharts({ startTime: r[0], endTime: r[1] })
    },
    getDate3(r) {
      this.getInvestChart({ startTime: r[0], endTime: r[1] })
    },
    getDate4(r) {
      this.getByDate({ startTime: r[0], endTime: r[1] })
    }
  }
}
</script>

<style lang="scss" scoped>
.tablist {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 40px;
    display: block;
    text-align: left;
    font-weight: bold;
    margin: 30px 0;
    padding: 0;
  }
}

.num {
  font-weight: bold;
  font-size: .8rem;
  margin: 0;
  padding: 0;
}
</style>
